<template>
  <div style="padding-top:1.5rem;">
    <TopNav title="MoneyShiftPage.zzcz" show_left="true" show_right="true"></TopNav>
    <div>
      <div style="overflow: hidden;height:1.2rem;line-height: 1.2rem;">
        <div class="pull-left" style="width:40%">{{ $t('MoneyShiftPage.dfzh') }}</div>
        <div class="pull-left" style="width:20%">{{ $t('MoneyShiftPage.jq') }}</div>
        <div class="pull-left" style="width:40%;">{{ $t('MoneyShiftPage.rq') }}</div>
      </div>
      <nut-leftslip v-for="(item, index) in data" :key="item.id" ref="leftslip">
        <div slot="slip-main" class="slip-main">
          <div style="width:40%">{{item.is_receive?item.from:item.to}}</div>
          <div style="width:20%"><b><span>{{item.is_receive?'+':'-'}}</span>{{item.money}}</b></div>
          <div style="width:40%;">
            {{item.created_at.substr(5)}}
          </div>
        </div>
        <div slot="slipbtns" class="slipbtns">
          <a href="javascript:;" @click="handleClickRemove(item.id,index)">{{ $t('MoneyShiftPage.sc') }}</a>
        </div>
      </nut-leftslip>
      <li v-if="loading">
        <div style="text-align: center;">
          <van-loading/>
        </div>
      </li>
      <div v-if="data.length==0">
        <EmptyBox text="MoneyShiftPage.zwjl"/>
      </div>
      <div class="bottom-tips">
        {{ $t('MoneyShiftPage.gy') }}<b>{{data.length}}</b>{{ $t('MoneyShiftPage.tjl') }}({{ $t('MoneyShiftPage.zxszj') }}300{{ $t('MoneyShiftPage.tjl') }})
      </div>
      <div @click="handleCLickMore" class="plus-box">
        <img src="../../static/img/plus.png" alt="">
      </div>
      <nut-popup v-model="showDialog" closeable close-icon="cross" position="bottom">
        <div style="padding:1.3rem 0.5rem 0.5rem 0.5rem;text-align: center">
          <nut-textinput
            v-model="money_shift"
            label="$t('MoneyShiftPage.zzje')："
            :placeholder="'$t(\'MoneyShiftPage.zdkz\')'+(user.balance)"
            :clearBtn="true"
            :disabled="false"
          />
        </div>
        <div style="padding:0.5rem;text-align: center">
          <nut-textinput
            v-model="targetUsername"
            label="$t('MoneyShiftPage.dfzh')："
            :clearBtn="true"
            :disabled="false"
          />
        </div>
        <nut-button
          :disabled="loading"
          style="margin-top:0.5rem;background: #f36666;margin-bottom:0.5rem;"
          @click="handleClickOk"
        >{{ $t('MoneyShiftPage.tj') }}</nut-button>
      </nut-popup>
    </div>
  </div>
</template>

<script>
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";

export default {
  name: 'MoneyShiftPage',
    components: {
      TopNav,
        EmptyBox
    },
    data () {
    return {
      user:{},
      data:[],
      loading:false,
      showDialog:false,
        showShift: false,
        money:'',
        money_shift: '',
        content:'',
        withdraw_info:'',
        targetUsername:'',
    }
  },
    methods:{
        handleClickOk(){
          this.showDialog= false;
          if(!this.targetUsername || !this.money_shift){
              return;
          }
          if(this.money_shift > this.user.balance){
              this.$toast.fail(this.$t('MoneyShiftPage.mnmdq'));
              return;
          }
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.money_shift_add,this.$qs.stringify({
                money:this.money_shift,
                username: this.targetUsername
            })).then((res)=>{
                if(res.data.code === 0){
                    this.$toast.success(res.data.msg);
                    this.getUser();
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch ((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            });
        },
        getUser(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.user).then((res)=>{
                this.user = res.data;
            }).catch().then(()=>{
                loading.hide();
            })
        },
        getData(){
            this.loading = true;
            this.$axios.get(this.$api_url.money_shift_list).then((res)=>{
                this.data = res.data;
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.loading = false;
            })
        },
        getWithdrawInfo(){
            this.$axios.get(this.$api_url.withdraw_info).then((res)=>{
                this.withdraw_info = res.data;
            })
        },
        handleClickRemove(id){
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.money_shift_del,this.$qs.stringify({
                id:id
            })).then((res)=>{
                if(res.data.code === 0){
                    this.$toast.success(res.data.msg);
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch ((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            });
        },
        handleClickShift(){
            this.showShift =  true;
        },
        handleCLickMore(){
            if(!this.user.bank && !this.user.verify_detail){
                this.$toast.fail(this.$t('MoneyShiftPage.qxbdyxkhwszl'));
                return;
            }
            this.showDialog = true;
        },
    },
    mounted() {
      this.getUser();
      this.getData();
      this.getWithdrawInfo();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .bottom-tips{
    margin-top:1rem;
  }
  .plus-box{
    position: absolute;
    right: 0.5rem;
    bottom:0.5rem;
  }
</style>
